<template>
    <el-container class="h100">
        <el-header class="header">
            <!--<el-row>-->
                <!--<el-col :span="20" class="title">-->
                    <!--&lt;!&ndash;北部湾港通船舶经纪有限公司&ndash;&gt;-->
                <!--</el-col>-->
                <!--<el-col :span="4" class="login">-->
            <div></div>
            <div class="login">
                {{email}}
                <el-button v-if="!token" size="mini" type="primary" @click="openDialog">登录</el-button>
                <el-button v-else size="mini" type="danger" @click="logOut">退出登录</el-button>
            </div>

                <!--</el-col>-->
            <!--</el-row>-->
        </el-header>
        <el-container class="h100">
            <el-aside class="aside h100">
                <!--@select="handleSelect"-->
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    :router="true"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>新闻管理</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <el-menu-item index="/companyNews?type=5">最新公告</el-menu-item>
                            <el-menu-item index="/companyNews?type=0">公司新闻</el-menu-item>
                            <el-menu-item index="/companyNews?type=1">行业新闻</el-menu-item>
                            <el-menu-item index="/companyNews?type=2">口岸动态</el-menu-item>
                            <el-menu-item index="/companyNews?type=3">航运保险</el-menu-item>
                            <el-menu-item index="/companyNews?type=4">航运金融</el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>知识中心</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <el-menu-item index="/knowledges?type=0">基础知识</el-menu-item>
                            <el-menu-item index="/knowledges?type=1">港口知识</el-menu-item>
                            <el-menu-item index="/knowledges?type=2">物流知识</el-menu-item>
                            <el-menu-item index="/knowledges?type=3">交易知识</el-menu-item>
                            <el-menu-item index="/knowledges?type=4">金融知识</el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>港口业务</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <el-menu-item index="/businesses?type=0">全国港口吞吐量</el-menu-item>
                            <el-menu-item index="/businesses?type=1">主要港口吞吐量</el-menu-item>
                            <el-menu-item index="/businesses?type=2">集装箱吞吐量</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>货盘租船</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <!--<el-menu-item index="/">散货市场</el-menu-item>-->
                            <el-menu-item index="/schedule">班期信息</el-menu-item>
                            <el-menu-item index="/goods">散货货盘</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>船员信息</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <el-menu-item index="/officer">船员应聘</el-menu-item>
                            <el-menu-item index="/jobs">公司招聘</el-menu-item>
                            <!--<el-menu-item index="5-3">船员考试</el-menu-item>-->
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>船舶交易</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <!--<el-menu-item index="/goods">交易指数</el-menu-item>-->
                            <el-menu-item index="/transaction?type=0">求购详情</el-menu-item>
                            <el-menu-item index="/transaction?type=1">出售详情</el-menu-item>
                            <el-menu-item index="/president">成交公示</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="7">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>关于我们</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <el-menu-item index="/companyProfile">公司简介</el-menu-item>
                            <!--<el-menu-item index="7-2">经营范围</el-menu-item>-->
                            <!--<el-menu-item index="7-3">联系信息</el-menu-item>-->
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="8">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>用户表</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <el-menu-item index="user">管理员</el-menu-item>
                            <el-menu-item index="8-2">客户</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="9">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>其他</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title"></template>
                            <el-menu-item index="9-1">广告</el-menu-item>
                            <el-menu-item index="9-2">友情链接</el-menu-item>
                            <el-menu-item index="9-3">网站配置</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-dialog
                        width="300px"
                        class="login-dialog"
                        :visible.sync="loginModel"
                        center>
                        <div slot="title">登录</div>
                        <el-form  label-width="40px">
                            <el-form-item label="邮箱" prop="pass">
                                <el-input size="small" type="email" v-model="email" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="checkPass">
                                <el-input size="small" type="password" v-model="password" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-form>
                    <div class="login-box">
                        <el-button @click="onLogin" type="primary" size="mini">登录</el-button>
                    </div>

                    <!--<el-button size="mini">取消</el-button>-->
                    <!--<span slot="footer" class="dialog-footer">-->
                <!--</span>-->
                </el-dialog>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
// import HelloWorld from './components/User.vue'
import api from './utils/api'
import {post} from './utils/request'
export default {
  name: 'app',
    data(){
      return {
          isLogin:false,
          loginModel:false,
          email:'',
          password:'',
          token:null,
      }
    },
      components: {
      },
    mounted(){
        this.getToken()
    },
    methods: {

        openDialog(){
            this.loginModel=true
        },
        onLogin(){
            let {email,password} = this
            post(api.login,{
                email,password
            }).then(res=>{
               // this.isLogin =true
                let {token,email} = res
                localStorage.setItem('token',token)
                localStorage.setItem('email',email)
                window.location.reload()
            }).catch(err=>{
                this.$message({
                    type: 'info',
                    message: err.msg
                });
            })
        },
        getToken(){
            let token = localStorage.getItem('token')
            let email = localStorage.getItem('email')
            this.token = token
            this.email = email
            return token;
        },
        logOut(){
            post(api.logout,{}).then(res=>{

            }).catch(err=>{
                window.location.reload()
            })
        }
    }
}
</script>

<style scoped>
    .header{
        background: rgb(84, 92, 100);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .aside{
        width: 200px;
        background: rgb(84, 92, 100);
    }
    .title{
        color: #ffffff;
        font-size: 35px;
        font-weight: bold;
        text-align: center;
    }
    .login{
        margin-right: 20px;
        color: #ffffff;
    }
    .login-box{
        text-align: center;
    }
    .login-dialog{
        /*width: 200px;*/
    }
</style>
